{% extends 'main.html' %}
{% load func %}

{% block title %}
    <title>king for wechat</title>
{% endblock %}


{% block content %}


    <div class="col-xs-12">
					            <div class="panel">
					                <div class="panel-heading">
					                    <h3 class="panel-title">联系人列表</h3>
					                </div>

					                <!--Data Table-->
					                <!--===================================================-->
					                <div class="panel-body">
                                        <div class="panel media middle pad-all">


					                </div>
                                        <center><h4 id="msg_error" style="color: red;;"></h4></center>
                                        <input id="msg" class="form-control" placeholder="请输入要发送的消息！！">
					                    <div class="pad-btm form-inline">

					                        <div class="row">
					                            <div class="col-sm-6 table-toolbar-left">
					                                <button  class="btn btn-success" onclick="return send(1)">发送消息</button>
                                                    <button class="btn btn-purple" onclick="update()">刷新好友</button>
                                                    <button id="demo-bootbox-custom-h-form" class="btn btn-danger" >发送多条</button>

					                            </div>
					                            <div class="col-sm-6 table-toolbar-right">
					                                <div class="form-group">
                                                        <h4 id="search_error" style="color: red;"></h4>
					                                    <input type="text"  class="form-control" placeholder="好友昵称或备注" id="search">
                                                        <button class="btn btn-purple" onclick="return search()">查找好友</button>
                                                        <button class="btn btn-purple" onclick="flush_page()">显示所有</button>
					                                </div>

					                            </div>
					                        </div>
					                    </div>
					                    <div class="table-responsive">
					                        <table class="table table-striped">
					                            <thead>
					                                <tr>
                                                        <th><input type="checkbox" onchange="choices(this)"></th>
					                                    <th>备注</th>
					                                    <th>微信名</th>
					                                    <th>签名</th>
					                                    <th class="text-center">性别</th>
					                                </tr>
					                            </thead>
					                            <tbody id="search_friend">

                                                {% for item in user %}
                                                    {% if item.AttrStatus != 0  %}
                                                        <tr>
                                                            <td><input name="user" userid="{{ item.UserName }}" type="checkbox"></td>
                                                            <td>{{ item.RemarkName }}</td>
                                                            <td><span class="text-muted">{{ item.NickName }}</span></td>
                                                            <td>{{ item.Signature }}</td>
                                                            <td class="text-center">
                                                                {% if item.Sex == 1 %}
                                                                   <div class="label label-table label-success">男</div>
                                                                {% elif item.Sex == 2 %}
                                                                    <div class="label label-table label-warning">女</div>
                                                                {% else %}
                                                                    <div class="label label-table label-danger">未填写</div>
                                                                {% endif %}
                                                            </td>
					                                    </tr>
                                                    {% endif %}
                                                {% endfor %}

					                            </tbody>
					                        </table>
					                    </div>
					                    <hr class="new-section-xs">
					                    <div class="pull-right">
					                        <ul class="pagination text-nowrap mar-no">
                                                {% page user %}
					                        </ul>
					                    </div>
					                </div>
					            </div>
					        </div>

<script>
    function send(count){
        var msg=$('#msg').val();
        if(msg.length == 0 ){
            $('#msg_error').text('请输入要发送的消息！！');
            return false
        }
        var choices_user=$("input:checked");
        console.log(choices_user);
        to_ids=[];

        $.each(choices_user, function () {
            to_ids.push($(this).attr('userid'))
        });

        if(to_ids.length == 0){
            $('#msg_error').text('至少选择一个好友发送消息！');
            return false
        }
        $.ajax({
            url:'/send_msg/',
            type:'POST',
            data:{'users':JSON.stringify(to_ids),'msg':msg,'count':count},
            success:function(arg){
                $('#msg_error').text(arg);
            }
        }
        )

    }
    function update(){
        $('#msg_error').text('请稍后！正在向服务器请求好友列表！！')
        $.ajax({
            url:'/update',
            type:'GET',
            success: function (arg) {
                alert('向腾讯服务器重新获取好友列表成功');
                $('#msg_error').text('刷新好友列表成功！！');
                location.reload();
                console.log('刷新好友成功')
            }
        })
    }
    function choices(ths){
        var c=$(':checkbox');
        var t=$(ths).prop('checked');
        if (t ){
            c.prop('checked',true)
        }else {
            c.prop('checked',false)
        }
    }
    function go(){
        var des=$('#go').val();
        if (des.length == 0){
            alert('必须输入要跳转的页码')
            return false;
        }
        location.href='/user/?page='+des
    }
    function search(){
        var search_filed=$('#search').val();
        if(search_filed.length == 0){
            $('#search_error').text('必须输入要查找的好友昵称或微信备注!!')
            return false
        }
        $.ajax({
            url:'/search/',
            type:'post',
            dataType:'JSON',
            data:{'search':search_filed},
            success:function(arg){
                eml='';
                $.each(arg,function(k,v){
                    if (v['AttrStatus'] != 0){
                        var sex='';
                        if(v['Sex'] == 1){
                            sex='男'
                        }
                        if(v['Sex'] == 2){
                            sex='女'
                        }else {
                            sex='未设置性别'
                        }
                        tmp='<tr><td><input userid="'+v['UserName']+'"'+'type="checkbox"></td>'+
                        '<td>'+v['RemarkName']+'</td>'+
                        '<td><span class="text-muted">'+v['NickName']+'</span></td>'+
                        '<td>'+v['Signature']+'</td>'+
                        '<td class="text-center"><div class="label label-table label-success">'+sex+'</div></td></tr>'
                    }
                    eml+=tmp
                });
                $('#search_friend').empty();
                $('#search_friend').append(eml)
            }
        })
    }
    function flush_page(){
        location.reload()
    }
</script>
{% endblock %}
